<template>
  <div class="stepper">
    <div class="stepper_item">
      <!-- 减号按钮 -->
      <div
        class="stepper_item_minus"
        :class="{ disabled: num <= min }"
        @click="onMinus"
      >
        <Icon name="jian" />
      </div>

      <!-- 数量显示 -->
      <div class="stepper_item_num">
        {{ num }}
      </div>

      <!-- 加号按钮 -->
      <div
        class="stepper_item_plus"
        :class="{ disabled: num >= max }"
        @click="onAdd"
      >
        <Icon name="add" />
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/common/Icon/index.vue';
import { throttle } from '@/utils/throttle';

export default {
  name: 'Stepper',
  components: { Icon },
  props: {
    num: { type: Number, default: 1 },
    max: { type: Number, default: Infinity },
    min: { type: Number, default: 1 },
  },
  methods: {
    onAdd: throttle(function () {
      if (this.num >= this.max) return;
      this.$emit('add');
    }, 1000), // 设置3000毫秒的间隔时间
    onMinus: throttle(function () {
      if (this.num <= this.min) return;
      this.$emit('minus');
    }, 1000), // 设置3000毫秒的间隔时间
  },
};
</script>

<style scoped>
.stepper_item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.stepper_item_minus,
.stepper_item_plus,
.stepper_item_num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f3f5;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}

.stepper_item_minus.disabled,
.stepper_item_plus.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.stepper_item_num {
  margin: 0 4px;
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}
</style>
